<template>
  <div class="main-body" :class="{ 'compact-mode': compact, 'notice-hidden': !noticeVisible }">
    <RouterView />
  </div>
</template>
<script setup>

import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'

const props = defineProps({
  compact: Boolean,
  noticeVisible: Boolean
})

const mainBodyRef = ref(null)
const route = useRoute()

// 监听路由变化
watch(() => route.path, () => {
  // 重置容器滚动位置
  if (mainBodyRef.value) {
    mainBodyRef.value.scrollTop = 0
  }
})
</script>
<style scoped>
.main-body {
  /* 优化间距计算 */
  margin-top: calc(30px + 60px); /* 使用calc动态计算 */
  transition: margin-top 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.compact-mode {
  margin-top: 50px;
}
</style>
